﻿<!DOCTYPE html>
<html lang="en">

<head>
  <!-- IIS Virtual Directory name -->
  <!--<base href="/JSViewer_MVC_Core/">-->

  <meta charset="utf-8">
  <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <title>JS Viewer</title>
  <link href="jsViewer.min.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
</head>

<body onload="loadViewer()">
  <div style="width: 100%; overflow-x: hidden">
    <div style="float:left; width: 200pt" class="main-nav navbar">
      <div id='list-heading'>Select report</div>
      <ul id="reportsList" class="nav navbar-nav"></ul>
    </div>
    <div style="float:right;width:calc(100% - 200pt)" id="viewerContainer">
    </div>
  </div>
  <script type="text/javascript" src="jsViewer.min.js"></script>
  <script type="text/javascript">
    let viewer;

    function loadViewer() {
      viewer = GrapeCity.ActiveReports.JSViewer.create({
        element: '#viewerContainer'
      });
      localize();
      populateReports();
    }

    function setActive(report) {
      let reportsList = document.getElementById("reportsList");
      let reports = reportsList.children;
      for (let i = 0; i < reports.length; i++) {
        reports[i].classList.remove('active');
      }
      report.classList.add('active');
    }

    function populateReports() {
      let reportsList = document.getElementById("reportsList");
      let oReq = new XMLHttpRequest();
      oReq.onload = function () {
        let reportsArray = JSON.parse(this.responseText);
        for (let i = 0; i < reportsArray.length; i++) {
          const reportName = reportsArray[i];
          const report = document.createElement('li');
          report.className = 'reportList_item';
          if (i === 0) report.className += ' active'
          const title = document.createElement('span');
          title.innerText = reportName;
          report.appendChild(title);
          reportsList.appendChild(report);

          report.addEventListener('click', function () {
            viewer.openReport(reportName);
            setActive(report);
          });
        }
        if (reportsArray.length > 0)
          viewer.openReport(reportsArray[0]);
      };
      oReq.open("get", "reports", false);
      oReq.send();
    }

    function localize() {
      if (navigator.language === 'ja') {
        document.getElementById("list-heading").innerText = "レポートを選択";
        document.title = "JSビューア";
      }
    }
  </script>
</body>
</html>